<template>
    <div>
        <n-carousel height="190px" :initialIndex="3" ref="carouselRef">
            <n-carousel-item v-for="item in sizeList">
                <iconItem :size="item" @add="handleAdd">
                    <component :is="component" :size="item"></component>
                </iconItem>
            </n-carousel-item>
        </n-carousel>
    </div>
</template>

<script setup lang="ts">
import iconItem from '@/components/carousel/item/iconItem.vue';
import { NCarouselType } from '@/components/interface/main';

const emits = defineEmits(['add'])

const props = defineProps<{
    component: Component,
}>()

const sizeList = ['1x1', '1x2', '2x1', '2x2', '2x4']

const handleAdd = () => {
    emits('add')
}

const carouselRef = ref<NCarouselType>()
const getIconSize = () => {
    return sizeList[carouselRef.value!.currentIndex]
}

defineExpose({
    getIconSize
})
</script>

<style scoped lang="scss"></style>